<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			<p>批量发放积分</p>
			<div class="send-text">已选中 
				<span v-if="sendType == 'bath'">{{userList?.length}}</span>
				<span v-else>1</span> 
				位同学
			</div>
			<div class="form">
				<div>
					<input type="number" placeholder="请输入积分" v-model="score"/>
					<span>积分/人</span>
				</div>
				
				<el-select
					v-if="sendType == 'bath'"
					class="form-s"
				    v-model="userList"
				    multiple
				    collapse-tags
					clearable
				    placeholder="请选择学生">
				    <el-option
				      v-for="item in studentList"
				      :key="item.id"
				      :label="item.realname"
				      :value="item.id">
				    </el-option>
				  </el-select>
			</div>
			
			<div class="send-text">需要发放积分：<span>{{score}}</span> 积分</div>
			<div class="send-text">当前账户可发放积分：<span>{{studentInfo?.score_num}}</span> 积分</div>
			<div class="submit" @click="submit">确定</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/utils';
	import {
		sendScore
	} from '@/api/personal.js';
	export default {
		props: {
			studentList:{
				type: Array,
				default: ()=>[]
			},
			studentInfo:{
				type: Object,
				default: ()=>{}
			},
			sendType:{
				type: String,
				default:"single"
			},
			sendItem:{
				type: Object,
				default: ()=>{}
			}
		},

		data() {
			return {
				score:null,
				userList:[]
			}
		},
		
		created() {
			
		},
		
		methods: {
			async submit(){
				if(!this.score){
					this.$message("请输入积分");
					return
				}
				if(!this.userList?.length && !this.sendItem?.id){
					this.$message("请选择学生");
					return
				}
				let obj= {score:this.score}
				if(this.sendItem?.id){
					obj.user_id_arr = this.sendItem?.id
				}
				else{
					obj.user_id_arr = this.userList.join();
				}
				const {
					data,
					status
				} = await sendScore(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.$emit("handleSend")
					this.$message.success("积分发放成功");
				}
				else{
					this.$message.warning("积分发放失败");
				}
			},
			
			close() {
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 420px;
			padding: 30px;
			background: #FFFFFF;
			border-radius: 10px;
			p{
				font-weight: 500;
				font-size: 20px;
				color: #333333;
				margin-bottom: 20px;
			}
			.send-text{
				margin-bottom: 10px;
				font-size: 14px;
				color: #666666;
				span{
					color: #333333;
					font-weight: bold
				}
			}
			.form{
				div{
					@include flex-row;
					margin-bottom: 10px;
					input{
						border: none;
						outline: none;
						width: 82%;
						height: 44px;
						padding-left: 16px;
						line-height: 44px;
						background: #F0F3F4;
						border-radius: 5px 5px 5px 5px;
						border: 1px solid #CFDDE1;
						margin-right: 10px;
					}
					span{
						font-size: 14px;
						color: #666666;
					}
				}
				.form-s{
					width: 82%;
					height: 44px;
					
					:deep(input){
						height: 44px;
						line-height: 44px;
						background: #F0F3F4;
						border: 1px solid #CFDDE1;
					}
					:deep(.el-tag--mini){
						height: 26px;
						line-height: 26px;
					}
				}
				
			}
			.submit{
				@include cursor-style;
				width: 100%;
				height: 50px;
				line-height: 50px;
				margin-top: 20px;
				text-align: center;
				background: #FF8A00;
				border-radius: 5px 5px 5px 5px;
				font-size: 16px;
				color: #FFFFFF;
			}
			
			.close {
				position: absolute;
				right: 20px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
		}
	}
</style>
